<template>


	<div id="app">


		<el-form :inline="true" :model="formInline" class="demo-form-inline">


			<el-date-picker v-model="formInline.createtime" type="daterange" range-separator="至" start-placeholder="开始日期"
			 end-placeholder="结束日期">
			</el-date-picker>

			<el-form-item label="请输入患者姓名">
				<el-input v-model="formInline.name" placeholder="请输入患者姓名"></el-input>
			</el-form-item>
			<el-form-item label="接诊状态">
				<el-select v-model="formInline.region" placeholder="请选择">
					<el-option label="全部" value="0"></el-option>
					<el-option v-for="vurgsstyle in vv" :key="vurgsstyle.id" :label="vurgsstyle.name" :value="vurgsstyle.id">

					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit()">查询</el-button>
			</el-form-item>
		</el-form>
		<!-- ***********************************************列表数据*********************************************************************** -->


		<el-row>
			<el-col :span="5" v-for="(o, index) in table" :key="o" :offset="index > 0 ? 2 : 0" style="margin-top: 20px;margin-left: 100px;">
				<el-card :body-style="{ padding: '0px'}" style="width: 350px;">

					<img src="../assets/111.png" class="image">
					<img src="" class="image">
					<div style="padding: 14px;">

						<span style="font-weight:bold; font-size: 17px; color: red;">{{o.name}}</span>

						<span style="color: #B3C0D1; margin-left: 8px; margin-right: 5px;">会员等级</span>
						<i><b style="font-size: 16px;color: gold; margin-right: 15px;">{{o.vname}}</b></i>

						<el-button type="success" round size="small">{{o.mname}}</el-button>

						<br />
						<br />
						<span style="color: #B3C0D1; margin-left: 8px; margin-right: 5px;">创建时间: {{o.createtime}}</span>
						<br />
						<br />
						<span style="color: #B3C0D1; margin-left: 8px; margin-right: 5px;">科室: {{o.sname}}</span>
						<span style="color: #B3C0D1; margin-left: 8px; margin-right: 5px;">医生: {{o.dname}}</span>

						<br />
						<br />

						<span style="color: #B3C0D1; margin-left: 8px; margin-right: 5px;">手机号码: {{o.phone}}</span>

						<div class="bottom clearfix">
							<!-- 	<time class="time">{{ currentDate }}</time> -->
							<br />
							<br />
							<el-button type="info" @click=jeizhen>接诊</el-button>

							<el-button type="info" @click=lookhuan(o.id)>查看患者信息</el-button>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo"
		 :page-sizes="sizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
	</div>
</template>


<script>
	export default {
		data() {
			return {
				currentDate: new Date(),
				vv: [],
				formInline: {},
				table: [],
				pageNo: 1,
				pageSize: 9,
				sizes: [3, 5, 8],
				total: 0

			}
		},
		created: function() {
			this.initData();
			this.getjiu();

		},
		methods: {
			/* ofirst(){
				this.$router.push("/About");
			}, */

			lookhuan(id) {
				alert(id);


				this.$router.push({
					name: 'Chakan',
					query: {
						id: id
					}
				})

			},
			jeizhen() {
				this.$router.push("/Jiezhen");
			},
			getjiu() {
				this.axios.get('http://localhost:9097/sickperson/jiulist').then((res) => {
					this.vv = res.data;

				})
			},
			onSubmit() {
				this.initData();
			},
			jz() {
				this.$router.push("/Djie");
			},
			initData() {
				this.axios.get('http://localhost:9097/sickperson/list', {
					params: {
						ct1: this.formInline.createtime ? this.formInline.createtime[0] : '',
						ct2: this.formInline.createtime ? this.formInline.createtime[1] : '',
						id: this.formInline.region,
						name: this.formInline.name,
						current: this.pageNo,
						size: this.pageSize

					}
				}).then((res) => {
					this.table = res.data.obj.records;
					this.total = res.data.obj.total;
				})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.initData();
			},
			handleCurrentChange(val) {
				this.pageNo = val;
				this.initData();
			}

		}
	}
</script>

<style>
	.time {
		font-size: 15px;
		color: #999;
	}

	.bottom {
		margin-top: 35px;
		line-height: 30px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 45%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}
</style>
